<template>
  <el-dialog class="edit-box" :title="dialog.title" :visible.sync="dialog.visible" append-to-body top="5vh">
    <el-form
      ref="editInfo"
      class="editInfo"
      :model="editInfo.data"
      :rules="editInfo.rules"
      size="small"
      label-width="120px"
    >

      <!--<el-form-item label="流程标题" prop="title">
         <el-input :disabled="true" size="small" v-model="editInfo.data.title" placeholder="请输入流程标题"></el-input>
      </el-form-item>-->

      <el-form-item label="部门" prop="deptId">
        <tree-select
          v-model="editInfo.data.deptId"
          :options="departmentAllListData"
          :normalizer="treeSelectProps"
          placeholder="选择部门"
        />
      </el-form-item>
      <el-form-item label="发放月份" prop="salaryDate">
        <el-date-picker
          v-model="editInfo.data.salaryDate"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月"
        />
      </el-form-item>

      <el-form-item label="发放类型" prop="salaryType">
        <el-select v-model="editInfo.data.salaryType" size="small" placeholder="请选择发放类型">
          <el-option label="请选择" value="" />
          <el-option label="外包公司工资模板" :value="10" />
          <el-option label="工资补发" :value="20" />
          <el-option label="股份公司工资模板" :value="11" />
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="handleEditSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from 'lodash'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'SalaryMake',
  components: {
    TreeSelect
  },
  mixins: [],
  props: {
    visible: {
      type: [Boolean],
      required: true,
      default: false
    },
    departmentAllListData: {// 搜索参数
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialog: {
        status: 'create',
        visible: false, // 是否显示
        title: '制作工资'
      },
      formParams: { // 编辑需要的参数
        deptId: null, // 所属部门
        salaryDate: '' // salaryDate
      },
      editInfo: { // 编辑表单
        id: undefined,
        data: {
          ...this.formParams
        },
        rules: {
          deptId: [
            { required: true, message: '请选择所属部门', trigger: 'change' }
          ],
          salaryDate: [
            { required: true, message: '请选择年月', trigger: 'change' }
          ],
          salaryType: [
            { required: true, message: '请选择发放类型', trigger: 'change' }
          ]
        },
        disabled: false // 处理编辑，某些项禁止编辑
      },
      treeSelectProps(node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children,
          isDefaultExpanded: true
        }
      },
      detailInfo: null
    }
  },
  computed: {},
  methods: {

    handleEditSubmit: debounce(function() { // 编辑，提交，防抖
      this.$refs['editInfo'].validate((valid, object) => {
        if (valid) {
          // console.log(this.editInfo.data)
          this.$emit('on-created', this.editInfo.data)
        }
      })
    }, 300),

    async resetEditData(data = null) { // 重置编辑表单
      // this.dialog.status = data ? 'update' : 'create'
      // this.dialog.title = data ? '编辑' : '添加'
      // this.dialog.visible = true
      this.editInfo.id = undefined
      this.editInfo.disabled = false
      this.editInfo.data = {
        ...this.formParams
      }
    },
    async initEditDialog(data = null) { // 编辑－显示弹出框
      await this.resetEditData(data)

      this.$nextTick(() => {
        this.$refs['editInfo'].clearValidate()
      })
    }
  },
  watch: {
    visible(newVal, oldVal) {
      if (newVal !== this.dialog.visible) {
        this.dialog.visible = newVal
        if (newVal) {
          this.initEditDialog()
        }
      }
    },
    'dialog.visible'(newVal, oldVal) {
      this.$emit('update:visible', newVal)
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .editInfo {
    margin-right: 120px;

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }

    .el-date-editor--month,
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 98px;
    display: none;
  }

</style>
